<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        /* 填写样式 */
        body,
        html {
            padding: 0;
            margin: 0;
            font-size: 14px;
            color: #000000;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            table-layout: fixed;
        }

        thead {
            background: #3d444c;
            color: #ffffff;
        }

        td,
        th {
            border: 1px solid #e1e1e1;
            padding: 0;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- 填写标签 -->
    <!-- 
        HTML模块为一个简化版的购物车，tbody为商品列表，tfoot为统计信息，系统会随机在列表中生成一些初始商品信息
        1、请完成add函数，在列表后面显示items商品信息。参数items为{name: String, price: Number}组成的数组
        2、请完成bind函数，点击每一行的删除按钮(包括通过add增加的行)，从列表中删除对应行
        3、请注意同步更新统计信息，价格保留小数点后两位
        4、列表和统计信息格式请与HTML示例保持一致
        5、不要直接手动修改HTML中的代码
        6、不要使用第三方库
     -->
    <table id="jsTrolley">
        <thead>
            <tr>
                <th>名称</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>产品1</td>
                <td>10.00</td>
                <td><a href="javascript:void(0);">删除</a></td>
            </tr>
            <tr>
                <td>产品2</td>
                <td>30.20</td>
                <td><a href="javascript:void(0);">删除</a></td>
            </tr>
            <tr>
                <td>产品3</td>
                <td>20.50</td>
                <td><a href="javascript:void(0);">删除</a></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总计</th>
                <td colspan="2">60.70(3件商品)</td>
            </tr>
        </tfoot>
    </table>
    <script type="text/javascript">
        // 填写JavaScript
        // 新增行
        function add(items) {
            var tbody = document.getElementsByTagName('tbody')[0]
            var tfoot = document.getElementsByTagName('tfoot')[0]
            // 获取初始数据
            let count = tbody.children.length
            let price = parseFloat(tfoot.innerText.match(/\d+.\d+/)[0])
            // 新增行
            let tr = ''
            for (let i = 0; i < items.length; i++) {
                count += 1
                price += items[i].price
                tr += `<tr><td>${items[i].name}</td><td>${items[i].price.toFixed(2)}</td><td><a href="javascript:void(0);">删除</a></td></tr>`
            }
            tbody.innerHTML += tr
            tfoot.innerHTML = `<tr><th>总计</th><td colspan="2">${price.toFixed(2)}(${count}件商品)</td></tr>`
        }

        // 绑定事件，事件代理
        function bind() {
            var tbody = document.getElementsByTagName('tbody')[0]
            var tfoot = document.getElementsByTagName('tfoot')[0]
            tbody.addEventListener('click', function (e) {
                let num = tbody.children.length
                //console.log(tbody);
                // 过滤点击的是否是a标签
                if (e.target.tagName === "A") {
                    // 获取数据
                    let price = parseFloat(e.target.parentElement.parentElement.innerHTML.match(/\d+.\d+/)[0])
                    let total = tfoot.innerHTML.match(/\d+.\d+/)[0]
                    e.target.parentElement.parentElement.remove()
                    tfoot.innerHTML = `<tr><th>总计</th><td colspan="2">${(total - price).toFixed(2)}(${num - 1}件商品)</td></tr>`
                }
            })
        }
        // 执行绑定事件
        bind()
    </script>
</body>

</html>